// 1.默认导入material风格的组件库
import 'package:dart_core/views/OrderDetail.dart';
import 'package:flutter/material.dart';

class OrderList extends StatelessWidget {
  const OrderList({super.key});

  List<Widget> getList() {
    return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((int value) {
      return Container(
        width: double.infinity,
        height: 100,
        margin: const EdgeInsets.all(10),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(35),
          color: Colors.blue,
        ),
        child: Text(
          '我是第$value个item',
          style: const TextStyle(color: Colors.white),
        ),
      );
    }).toList();
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // 提供数据
    const Map orderInfo = {
      "createTime": "2024-08-15 21:49:48",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      "name": "茶水分离杯耐热隔热玻璃杯，茶水分离杯耐热隔热玻璃杯，茶水分离杯耐热隔热玻璃杯，茶水分离杯耐热隔热玻璃杯",
      "totalNum": 2,
      "curPrice": 119.5,
      "totalMoney": 119.5,
      "attrsText": "规格:白色240ml"
    };
    // 3.创建一个MaterialApp组件（指定应用整体的UI风格：material风格）
    return Scaffold(
        // 1.1 导航
        appBar: AppBar(
          title: const Text('ListView组件'),
          backgroundColor: Colors.pink,
        ),
        // 1.2 主体内容
        body: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                onTap: () {
                  // 跳转方式1
                  Navigator.push(context,
                      MaterialPageRoute(builder: (BuildContext context) {
                    return const Orderdetail();
                  }));
                  // 跳转方式2（命名路由）
                  Navigator.pushNamed(context, '/orderDetail',
                      arguments: {'orderInfo': orderInfo});
                },
                child: Container(
                  width: double.infinity,
                  height: 250,
                  padding: const EdgeInsets.all(10),
                  color: const Color.fromARGB(255, 240, 242, 243),
                  child: Column(children: [
                    // 1.2.1 第一层
                    Row(
                      children: [
                        Text(orderInfo['createTime']),
                        const Spacer(),
                        Text(
                          orderInfo['orderState'] == 2 ? '待收货' : '待付款',
                          style: TextStyle(
                            color: orderInfo['orderState'] == 2
                                ? Colors.red
                                : Colors.blue,
                          ),
                        ),
                      ],
                    ),
                    // 1.2.2 第二层
                    Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Row(
                        // 侧轴方向起始位置对齐
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 左侧
                          Image(
                            image: NetworkImage(orderInfo['image']),
                            width: 50,
                            height: 50,
                          ),
                          // 右侧
                          Expanded(
                              child: Padding(
                            padding: const EdgeInsets.only(left: 10),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                // 商品名称 + 数量
                                Row(
                                  children: [
                                    Expanded(
                                      child: Text(orderInfo['name']),
                                    ),
                                    Text('X${orderInfo['totalNum']}'),
                                  ],
                                ),
                                // 规格
                                Padding(
                                    padding: const EdgeInsets.only(top: 10),
                                    child: Container(
                                      padding: const EdgeInsets.all(5),
                                      decoration: BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      child: Text(
                                        orderInfo['attrsText'],
                                        maxLines: 1,
                                        style:
                                            const TextStyle(color: Colors.grey),
                                      ),
                                    )),
                                // 价格
                                Padding(
                                  padding: const EdgeInsets.only(top: 5),
                                  child: Text('￥${orderInfo['curPrice']}'),
                                )
                              ],
                            ),
                          ))
                        ],
                      ),
                    ),
                    // 1.2.3 第三层
                    // 合计，右对齐
                    Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Row(
                        children: [
                          const Spacer(),
                          const Text('合计：'),
                          Text('￥${orderInfo['totalMoney']}'),
                        ],
                      ),
                    ),
                    // 1.2.4 第四层
                    // 两个按钮 确认收货，取消订单
                    Padding(
                        padding: const EdgeInsets.only(top: 10),
                        child: Row(children: [
                          const Spacer(),
                          ElevatedButton(
                            onPressed: () {},
                            style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.red),
                            child: const Text('确认收货',
                                style: TextStyle(color: Colors.white)),
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          ElevatedButton(
                            onPressed: () {},
                            style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.cyan),
                            child: const Text('取消订单',
                                style: TextStyle(color: Colors.white)),
                          ),
                        ]))
                  ]),
                ),
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              // return const Divider(
              //   height: 1,
              //   color: Colors.grey,
              // // );
              // return Container(
              //   margin: const EdgeInsets.only(left: 10, right: 10),
              //   color: Colors.grey,
              // 分割线
              //   child: const Divider(
              //     height: 1,
              //   ),
              // );
              // );
              return Container(
                margin: const EdgeInsets.only(left: 10, right: 10),
                // 分割线
                width: double.infinity,
                height: 1,
                color: Colors.grey,
              );
            },
            itemCount: 20));
  }
}
